<template>
  <div>
    <div class="title">
      <span class="title-tag">{{title}}</span>
    </div>
    <div class="main">
      <slot></slot>
    </div>
    <div class="buttom">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "DefaultTitle"
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  align-content: left;
  background: #fff;
  border-style: none none solid none;
  border-color: #cdeefd;
  border-width: 2px;
}

.title-tag {
  font-size: 18px;
  padding: 0px 40px;
  height: 39px;
  line-height: 39px;
  color: #1479d7;
  border-radius: 0px;
}

.main {
  padding: 0px 10px;
  background: #fff;
}

.buttom {
  padding: 10px 10px;
}
</style>
